<template>
    <div  class="common-layout" style="background-color: #f1f1f5; height: 800px; width: 1550px;">
   <el-container>
     <el-container>
       <el-container>
               <el-aside width="900px" style="background-color:#ffff; margin-top: 10px; height: 170px;">
                   <div class="data-overview">
   <div class="header">
     <span class="title">数据概况</span>
     <span class="date">{{ currentDate }} {{ currentTime }}</span>
   </div>
   <div class="data-container">
     <div class="data-item">
       <span class="value">{{ onlineBookings }}</span>
       <span class="label">今日在线预订</span>
     </div>
     <div class="data-item">
       <span class="value">{{ expectedCheckins }}</span>
       <span class="label">今日预计入住</span>
     </div>
     <div class="data-item">
       <span class="value">{{ newCheckins }}</span>
       <span class="label">今日新入住</span>
     </div>
     <div class="data-item">
       <span class="value">{{ newCustomers }}</span>
       <span class="label">今日新顾客数</span>
     </div>
   </div>
 </div>
               </el-aside>
               <el-main width="350px" style="background-color:#ffff; margin-top: 10px; margin-left: 8px;">
                   <p style="text-align: center;">店铺还没有公众号</p>
                   <el-button  style="margin-left: 80px;">去绑定</el-button>
               </el-main>
       </el-container>
       <el-main style="margin-top: 10px; margin-left: 5px;height: 250px; background-color: #ffff;">
           
       </el-main>
       <el-footer style="margin-top: 10px; margin-left: 5px;height: 350px; background-color: #ffff;">Footer</el-footer>
     </el-container>
           <el-aside width="350px" style="height: 770px; background-color: #ffff; margin-top: 10px; margin-left: 5px;" >
               <div class="app-container">
   <!-- 试用版信息 -->
   <div class="trial-section">
     <h3>试用版</h3>
     <p>剩余 {{ remainingDays }} 天 ({{ expirationDate }})</p>
     <p>您的套餐即将到期，为了不影响您的正常经营，请及时续费</p>
     <button class="upgrade-btn" @click="handleUpgrade">立即升级</button>
   </div>

   <!-- 公告部分 -->
   <div class="announcement-section">
     <h3>公告</h3>
     <div class="announcement-list">
       <div v-for="(announcement, index) in announcements" :key="index" class="announcement-item">
         <span v-if="announcement.isImportant">[重要]</span>
         {{ announcement.title }}
         <span class="date">{{ announcement.date }}</span>
       </div>
     </div>
     <div class="more-link">更多</div>
   </div>

   <!-- 公众号部分 -->
   <div class="official-account-section">
     <h3>微盟智慧酒店官方公众号</h3>
     <img src="" alt="二维码" class="qr-code">
     <p>扫码免费学习更多酒店营销干货</p>
   </div>

   <!-- 常见问题部分 -->
   <div class="faq-section">
     <h3>常见问题</h3>
     <div v-for="(faq, index) in faqs" :key="index" class="faq-item">{{ faq }}</div>
   </div>

   <!-- 意见反馈部分 -->
   <div class="feedback-section">
     <img src="" alt="反馈图标" class="feedback-icon">
     <p>意见与反馈</p>
     <p>我们会及时反馈您的宝贵意见</p>
   </div>
 </div>
           </el-aside>
   </el-container>
 </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 初始化数据
const onlineBookings = ref(0);
const expectedCheckins = ref(0);
const newCheckins = ref(0);
const newCustomers = ref(0);

// 获取当前日期和时间
const currentDate = ref('');
const currentTime = ref('');

onMounted(() => {
 const now = new Date();
 currentDate.value = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
 currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
});
// 试用版信息
const remainingDays = ref(2);
const expirationDate = ref('2025.3.7到期');

// 公告数据
const announcements = ref([
 { title: '微信小程序备案通知', date: '2/21', isImportant: true },
 { title: '微盟接入微信小程序《隐私保护...', date: '9/11', isImportant: false },
 { title: '社区团购多重优化升级，全力支...', date: '5/13', isImportant: false },
 { title: '微盟技术标识产品升级', date: '6/24', isImportant: false },
 { title: '营销中心全新改版', date: '5/27', isImportant: false }
]);

// 常见问题数据
const faqs = ref([
 '"微盟酒店"是否支持免费试用？',
 '堂食订单如何配置小票打印？',
 '如何申请小程序？',
 '自定义菜单如何设置？',
 '小程序绑定已有商户号开通微信...',
 '如何进行支付配置？'
]);

const handleUpgrade = () => {
 // 这里可以添加升级的逻辑，比如跳转到升级页面
 console.log('点击了立即升级');
};
</script>
<style scoped>
.data-overview {
 border: 1px solid #ccc;
 border-radius: 5px;
 padding: 15px;
}
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 15px;
}
.title {
 font-size: 18px;
 font-weight: bold;
}
.data-container {
 display: flex;
 justify-content: space-around;
}
.data-item {
 text-align: center;
}
.value {
 font-size: 30px;
 color: blue;
 margin-bottom: 5px;
}
.label {
 font-size: 14px;
}
</style>
<style scoped>
.app-container {
 padding: 20px;
}

.trial-section {
 border: 1px solid #ccc;
 padding: 15px;
 margin-bottom: 20px;
}

.upgrade-btn {
 background-color: red;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

.announcement-section {
 margin-bottom: 20px;
}

.announcement-list {
 list-style: none;
 padding: 0;
}

.announcement-item {
 margin-bottom: 10px;
}

.date {
 color: #999;
}

.more-link {
 color: blue;
 text-align: right;
 cursor: pointer;
}

.official-account-section {
 text-align: center;
 margin-bottom: 20px;
}

.qr-code {
 width: 150px;
 height: 150px;
 margin: 10px auto;
}

.faq-section {
 margin-bottom: 20px;
}

.faq-item {
 margin-bottom: 10px;
}

.feedback-section {
 display: flex;
 align-items: center;
}

.feedback-icon {
 width: 30px;
 height: 30px;
 margin-right: 10px;
}
</style>